<template>
	<view class="container">
		<view class="feedback-form">
			<!-- 反馈类型 -->
			<view class="form-item">
				<text class="label">反馈类型</text>
				<view class="type-list">
					<view 
						v-for="(item, index) in feedbackTypes" 
						:key="index"
						:class="['type-item', selectedType === item.value ? 'active' : '']"
						@tap="selectedType = item.value"
					>
						{{item.label}}
					</view>
				</view>
			</view>
			
			<!-- 反馈内容 -->
			<view class="form-item">
				<text class="label">反馈内容</text>
				<textarea 
					class="content-input"
					v-model="content"
					placeholder="请详细描述您遇到的问题或建议"
					maxlength="500"
				></textarea>
				<text class="word-count">{{content.length}}/500</text>
			</view>
			
			<!-- 联系方式 -->
			<view class="form-item">
				<text class="label">联系方式（选填）</text>
				<input 
					class="contact-input"
					v-model="contact"
					placeholder="请留下您的联系方式，方便我们及时回复"
				/>
			</view>
			
			<!-- 图片上传 -->
			<view class="form-item">
				<text class="label">上传图片（选填）</text>
				<view class="image-list">
					<view 
						class="image-item"
						v-for="(item, index) in images"
						:key="index"
					>
						<image :src="config.apiBaseUrl + item" mode="aspectFill"></image>
						<text class="delete-btn" @tap="deleteImage(index)">×</text>
					</view>
					<view 
						class="upload-btn"
						@tap="chooseImage"
						v-if="images.length < 3"
					>
						<text class="icon">+</text>
					</view>
				</view>
				<text class="tip">最多上传3张图片</text>
			</view>
			
			<!-- 提交按钮 -->
			<button 
				class="submit-btn"
				:disabled="!isValid"
				@tap="handleSubmit"
			>
				提交反馈
			</button>
		</view>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { uploadImage, submitFeedback } from '@/services/feedback'
import config from '@/config'

// 反馈类型列表
const feedbackTypes = [
	{ label: '问题反馈', value: 'bug' },
	{ label: '功能建议', value: 'suggestion' },
	{ label: '投诉', value: 'complaint' },
	{ label: '其他', value: 'other' }
]

// 表单数据
const selectedType = ref('bug')
const content = ref('')
const contact = ref('')
const images = ref([])

// 表单验证
const isValid = computed(() => {
	return selectedType.value && content.value.trim().length > 0
})

// 选择图片
async function chooseImage() {
	try {
		const res = await uni.chooseImage({
			count: 3 - images.value.length
		})
		
		uni.showLoading({
			title: '上传中...'
		})
		
		// 上传图片
		const uploadTasks = res.tempFilePaths.map(path => uploadImage(path))
		const urls = await Promise.all(uploadTasks)
		console.log({urls});
		
		
		images.value.push(...urls)
		
		uni.hideLoading()
	} catch (err) {
		uni.hideLoading()
		uni.showToast({
			title: err.message || '上传失败',
			icon: 'none'
		})
	}
}

// 删除图片
function deleteImage(index) {
	images.value.splice(index, 1)
}

// 提交反馈
async function handleSubmit() {
	if (!isValid.value) return
	
	try {
		uni.showLoading({
			title: '提交中...'
		})
		
		await submitFeedback({
			feedback_type: selectedType.value,
			content: content.value,
			contact: contact.value,
			images: images.value
		})
		
		uni.showToast({
			title: '提交成功',
			icon: 'success'
		})
		
		setTimeout(() => {
			uni.navigateBack()
		}, 1500)
	} catch (err) {
		console.log({err});
		uni.showToast({
			
			title: err.message || '提交失败',
			icon: 'none'
		})
	} finally {
		uni.hideLoading()
	}
}
</script>

<style lang="scss">
.container {
	padding: 30rpx;
	min-height: 100vh;
	background: #f8f8f8;
}

.feedback-form {
	background: #fff;
	border-radius: 20rpx;
	padding: 30rpx;
	
	.form-item {
		margin-bottom: 30rpx;
		
		.label {
			font-size: 28rpx;
			color: #333;
			margin-bottom: 20rpx;
			display: block;
		}
		
		.tip {
			font-size: 24rpx;
			color: #999;
			margin-top: 10rpx;
			display: block;
		}
	}
}

.type-list {
	display: flex;
	flex-wrap: wrap;
	gap: 20rpx;
	
	.type-item {
		padding: 15rpx 30rpx;
		background: #f5f5f5;
		border-radius: 30rpx;
		font-size: 28rpx;
		color: #666;
		
		&.active {
			background: #07c160;
			color: #fff;
		}
	}
}

.content-input {
	width: 100%;
	height: 300rpx;
	background: #f5f5f5;
	border-radius: 12rpx;
	padding: 20rpx;
	font-size: 28rpx;
	color: #333;
}

.word-count {
	font-size: 24rpx;
	color: #999;
	text-align: right;
	margin-top: 10rpx;
	display: block;
}

.contact-input {
	width: 100%;
	height: 80rpx;
	background: #f5f5f5;
	border-radius: 12rpx;
	padding: 0 20rpx;
	font-size: 28rpx;
	color: #333;
}

.image-list {
	display: flex;
	flex-wrap: wrap;
	gap: 20rpx;
	
	.image-item {
		position: relative;
		width: 200rpx;
		height: 200rpx;
		
		image {
			width: 100%;
			height: 100%;
			border-radius: 12rpx;
		}
		
		.delete-btn {
			position: absolute;
			top: -20rpx;
			right: -20rpx;
			width: 40rpx;
			height: 40rpx;
			background: rgba(0,0,0,0.5);
			color: #fff;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
		}
	}
	
	.upload-btn {
		width: 200rpx;
		height: 200rpx;
		background: #f5f5f5;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		
		.icon {
			font-size: 60rpx;
			color: #999;
		}
	}
}

.submit-btn {
	width: 100%;
	height: 88rpx;
	background: #07c160;
	color: #fff;
	font-size: 32rpx;
	border-radius: 44rpx;
	margin-top: 60rpx;
	line-height: 88rpx;
	&:disabled {
		background: #ccc;
	}
}
</style> 